{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>基于机器学习的分布式系统故障诊断系统</title>
    <meta content="故障诊断系统" name="description">
    <meta content="CSUST" name="author">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    {% block style_content %}

    {% endblock %}
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="/static/css/style.css" rel="stylesheet" type="text/css">
    <style>
        #loading {
            position: absolute;
            z-index: 9999;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(1px);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .card.timeline-card {
            box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
        }
        .card-body-1 {
            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
        }
        .team-name {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 600px;
            font-size: 30px;
            font-family: "Arial Black", sans-serif;
        }
    </style>
</head>
<body>
<div id="preloader">
    <div id="status">
        <div class="spinner"></div>
    </div>
</div>
<!--等待页面加载成功-->
<div id="loading" style="display: none;">
        <img src="/static/picture/loading.gif" alt="" />
</div>
<header id="topnav">
    <div class="topbar-main">
        <div class="container-fluid">
            <div class="logo">
                <a href="{% url 'home' %}" class="logo">
                    <img src="/static/picture/logo.png" alt="图标">
                    <span class="hide-phone">
                        &nbsp;&nbsp;&nbsp;基于一维卷积网络的分布式故障诊断系统
                    </span>
                </a>
            </div>
            <div class="clearfix"></div>
        </div><!-- end container --></div><!-- end topbar-main --><!-- MENU Start -->
    <div class="navbar-custom">
        <div class="container-fluid">
            <div id="navigation"><!-- Navigation Menu-->
                <ul class="navigation-menu">
                    <li class="has-submenu"><a href="{% url 'home' %}"><i class="dripicons-device-desktop"></i>首页</a></li>
                    <li class="has-submenu"><a href="{% url 'train:upload' %}"><i class="dripicons-to-do"></i>训练</a></li>
                    <li class="has-submenu"><a href="{% url 'predict:upload' %}"><i class="dripicons-blog"></i>预测</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end navbar-custom -->
</header><!-- End Navigation Bar-->
{% block content %}
<div class="wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12" >
                <div class="page-title-box">

                    <h1 style="font-weight: bold; text-shadow: 2px 2px 4px #555555; text-align: center;">基于一维卷积网络的分布式故障诊断系统</h1>

                </div>
            </div>
        </div><!-- end page title end breadcrumb -->
        <div class="row">
            <div class="col-xl-4  col-lg-6">
                <div class="card timeline-card" style="height: 600px;">
                    <div class="card-body p-0">
                        <div class="bg-gradient2 text-white text-center py-3 mb-4">
                            <p class="mb-0 font-20">分布式系统故障简介</p>
                        </div>
                    </div>
                    <div class="card-body font-18" style="height: 500px;">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            大数据时代，分布式系统成为信息存储和处理的主流系统。相对于传统系统而言，分布式系统更为庞大和复杂，
                            故障发生的平均几率比较高，其运维的难度和复杂度大大提高。如何对分布式系统进行高效、准确的运维，
                            成为保障信息系统高效、可靠运行的关键问题。
                        </p>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            在分布式系统中某个节点发生故障时，故障会沿着分布式系统的拓扑结构进行传播，造成自身节点及其邻接节点相关的KPI指标和发生大量日志异常。
                        </p>
                    </div>
                    <div class="card-body">
                        <div class="d-sm-flex align-self-center"  style="height: 75px;">
                            <a href="{% url 'train:upload' %}" style="width: 100%; font-size: 30px; display: flex; align-items: center; justify-content: center;" class="btn btn-gradient-success waves-effect waves-light text-center">开始训练</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-lg-6">
                <div class="card">
                    <div class="card-body card-body-1 team-name" style="font-family: 'Helvetica', sans-serif; color: #333;">
                        <span style="font-size: 100px;">难</span>
                        <span style="font-size: 20px;">啊</span>
                        <span style="font-size: 100px;">难</span>
                        <span style="font-size: 20px;">队</span>
                    </div>
                </div>
            </div>
            <div class="col-xl-4  col-lg-6">
                <div class="card timeline-card" style="height: 600px;">
                    <div class="card-body p-0">
                        <div class="bg-gradient3 text-white text-center py-3 mb-4">
                            <p class="mb-0 font-20">我们的系统</p>
                        </div>
                    </div>
                    <div class="card-body font-18" style="height: 500px;">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            我们将的系统基于一维卷积神经网络来实现故障分类，主要包含两个功能：训练及预测。首页提供训练按钮以及预测按钮，
                            在训练阶段用户可以上传训练集在线训练模型，训练完成后可视化训练过程以及下载训练模型。在预测阶段用户可以上传测试集，
                            选择使用本地模型或在线训练的模型，测试完成后可视化测试结果，并可以下载json格式测试结果。
                        </p>
                    </div>
                    <div class="card-body">
                        <div class="d-sm-flex align-self-center"  style="height: 75px;">
                            <a href="{% url 'predict:upload' %}" style="width: 100%; font-size: 30px; display: flex; align-items: center; justify-content: center;" class="btn btn-gradient-warning waves-effect waves-light text-center">开始预测</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- end container -->
</div><!-- end wrapper -->
{% endblock %}

 <!-- Footer -->
<footer class="footer">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">林栖、舒毅聪、普岚、王欣</div>
        </div>
    </div>
</footer>
<!-- End Footer -->

<!-- jQuery -->
<!-- src="/static/js/jquery.min.js" 这种写法说明静态资源在最外面的static里面 -->
<!-- src="static/js/jquery.min.js" 这种写法说明静态资源在每一个单独的app里面 -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/popper.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/modernizr.min.js"></script>
<script src="/static/js/waves.js"></script>
<script src="/static/js/jquery.slimscroll.js"></script>
<script src="/static/js/jquery.nicescroll.js"></script>
<script src="/static/js/jquery.scrollTo.min.js"></script>
<!-- KNOB JS -->
<script src="/static/js/excanvas.js"></script>
<script src="/static/js/jquery.knob.js"></script>
<!-- App js -->
<script src="/static/js/app.js"></script>
<script>
    $('#loading').show();

   // 页面加载完成后执行回调函数
   $(document).ready(function() {
     onResultReady();
   });

   function onResultReady() {
     // 隐藏loading图标
     $('#loading').hide();
   }
</script>
{% block script_content %}
    <script src="/static/js/chart.min.js"></script>
    <script src="/static/js/console-ban.min.js"></script>
    <script src="/static/js/dashboard.js"></script>
{% endblock %}
</body>
</html>
